<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { getWanXingTianKongApi, tijiaoTikuApi } from '/api/request.js';
const props = defineProps({});
const platform = ref({});
const query = ref({
    qb_id: '',
    page: 1,
    la: true,
    trigger: false,
    total: 1,
    index: 0
});
const list = ref(null);
onLoad((e) => {
    query.value.qb_id = e.id;
    query.value.title = e.title;
});
const dati = ref([]);
const fetchList = async (type = true) => {
    try {
        uni.showLoading({
            mask: true
        });
        let res = await getWanXingTianKongApi(query.value);
        if (!type || !list.value) {
            list.value = [];
        }
        console.log(res);
        res.data.list.map((item) => {
            item.image = `http://zhangyu.aizhangyu.cn${item.image}`;
            item.arr1 = item.title
                .replace(/<\/?[^>]+(>|$)/g, '')
                .split('___.')
                .filter((item) => item.trim() !== '');
            list.value.push(item);
        });
        console.log(list.value);
        query.value.total = res.data.count;
        if (query.value.page * 10 >= query.value.total) {
            query.value.la = false;
        } else {
            query.value.la = true;
        }
    } catch (error) {
        console.log(error);
    }
};
onShow(async () => {
    if (!list.value || list.value.length < 1) {
        fetchList(false).finally(() => {
            uni.hideLoading();
        });
    }
    platform.value = uni.getStorageSync('platform');
});
const goback = () => {
    uni.navigateBack();
};
const showPage = (title, id) => {
    uni.navigateTo({
        url: '/pages/questionBank/components/sanji?title=' + title + '&id=' + id
    });
};
const showInfo = ref(false);
const showStatus = ref(false);
const changeInput = (index) => {
    if (list.value[query.value.index].arr1.length == index + 1) {
        showInfo.value = true;
    }
};
const center = ref(null);
const timer = ref(null);
const status = ref([]);
const showResult = ref(false);
const next = () => {
    if (timer.value) clearTimeout(timer.value);
    if (dati.value.length) {
        showStatus.value = true;
        let items = list.value[query.value.index];
        console.log(dati.value);
        status.value[
            query.value.index +
                (query.value.total >= 5 ? (query.value.page - 1) * 5 : query.value.total)
        ] = dati.value.every((item, indexs) => {
            return item == items[`answer${indexs + 1}`];
        });
        console.log(status.value);
        if (
            query.value.index == 4 ||
            query.value.index + (query.value.page - 1) * 5 == query.value.total - 1
        ) {
            center.value.open('center');
            return;
        }
        timer.value = setTimeout(() => {
            query.value.index++;
            dati.value = [];
            showInfo.value = false;
            showStatus.value = false;
        }, 800);
    } else {
        uni.showToast({
            title: '完形填空未全部完成',
            icon: 'none'
        });
    }
};
const tijiao = async (index) => {
    if (index == 1) {
        // 继续请求
        query.value.index = 0;
        query.value.page++;
        dati.value = [];
        showInfo.value = false;
        showStatus.value = false;
        center.value.close();
        uni.hideLoading();
    } else {
        let res = await tijiaoTikuApi({
            qb_id: query.value.qb_id,
            question_ids: status.value
                .map((item, index) => {
                    return list.value[index].id;
                })
                .join(',')
        });
        uni.showToast({
            title: res.msg,
            icon: 'none'
        });
        console.log(res);
        showResult.value = true;
        center.value.close();
        // 查看结果
    }
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> {{ showResult ? query.title : '完形填空' }} </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view v-if="!showResult && list && list.length" scroll-y="true" class="body">
            <view class="title"> 阅读下面短文,填入空白处的最佳答案 </view>
            <view class="list">
                {{ (query.page - 1) * 5 + query.index + 1 }}.
                <template v-for="(item, index) in list[(query.page - 1) * 5].arr1" :key="index">
                    <view class="left-name">
                        {{ item }}
                    </view>
                    <input
                        :class="{
                            active:
                                showStatus &&
                                dati[index] === list[query.index][`answer${index + 1}`],
                            wrong:
                                showStatus &&
                                dati[index] !== list[query.index][`answer${index + 1}`]
                        }"
                        type="text"
                        v-model="dati[index]"
                        @blur="changeInput(index)"
                    />.
                </template>
            </view>
            <view class="titles" :style="{ opacity: showInfo ? 1 : 0 }"> 答案解析 </view>
            <view class="labels" :style="{ opacity: showInfo ? 1 : 0 }">
                {{ list[query.index].analysis }}
            </view>
            <view class="btn uni-row" @click="next"> 下一题 </view>
        </scroll-view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
        <view class="wais" v-if="showResult && list && list.length">
            <view class="list">
                <view
                    class="item uni-row"
                    v-for="(item, index) in status"
                    :key="index"
                    :class="item ? 'active' : 'default'"
                >
                    {{ index + 1 }}
                </view>
            </view>
        </view>
    </view>
    <uni-popup ref="center" :mask-click="false">
        <view class="wai">
            <view class="title"> 恭喜您完成了完形填空 </view>
            <view class="label"> 你已完成了完形填空，要继续做题嘛？ </view>
            <view
                class="footer uni-row"
                :class="query.page * 5 <= query.total ? 'active' : 'default'"
            >
                <view class="fou bt" v-if="query.page * 5 <= query.total" @click="tijiao(1)">
                    继续做题</view
                >
                <view class="shi bt" @click="tijiao(2)"> 查看结果</view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="less">
.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 46rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 36rpx 0 56rpx;
    }

    .footer {
        &.active {
            justify-content: space-around;
        }

        &.default {
            justify-content: center;
        }

        .bt {
            width: 184rpx;
            height: 68rpx;
            font-size: 24rpx;
            line-height: 68rpx;
            border-radius: 36rpx;
        }

        .fou {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            background: #9561f3;
            color: #fff;
        }
    }
}

.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding: 0 28rpx 40rpx;

        .title {
            font-weight: 500;
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 30rpx;
        }

        .labels {
            font-size: 28rpx;
            color: #ef4828;
        }

        .titles {
            margin-top: 50rpx;
            font-size: 28rpx;
            // color: #333333;
            color: #ef4828;
            margin-bottom: 10rpx;
        }

        .list {
            .left-name {
                display: inline;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                vertical-align: text-bottom;
            }

            input {
                border-bottom: 4rpx solid #333;
                display: inline-block;
                width: 200rpx;
                text-align: center;
                font-size: 28rpx;
                margin: 0 0rpx 0 10rpx;

                &.active {
                    border-color: #67c23a;
                }

                &.wrong {
                    border-color: #f56c6c;
                }
            }
        }

        .btn {
            position: fixed;
            bottom: 40rpx;
            left: 28rpx;
            right: 28rpx;
            height: 88rpx;
            justify-content: center;
            background: #9561f3;
            border-radius: 16rpx;
            font-size: 32rpx;
            color: #ffffff;
        }
    }

    .wais {
        padding-top: 60rpx;

        .list {
            display: grid;
            padding: 0 54rpx;
            justify-content: space-around;
            grid-template-columns: repeat(5, 80rpx);
            gap: 20rpx;
        }

        .list .item {
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #22be55;
            width: 80rpx;
            height: 80rpx;
            background: #defde9;
            border-radius: 50%;

            &.active {
                color: #22be55;
                background: #defde9;
            }

            &.default {
                color: #fa7474;
                background: #ffe9e9;
            }
        }
    }
}
</style>
